import React, { useState, useCallback, useEffect, memo } from 'react';
import { Tabs, Tab, Box } from '@material-ui/core';
import { ToolBarProps } from '@/pages/credit-transfer/table';

export const TableTabs: React.FC<ToolBarProps> = memo(
  ({ fetch, setStatus, statusInfo }) => {
    const [value, setValue] = useState('1');

    const handleChange = async (
      event: React.SyntheticEvent,
      newValue: string,
    ) => {
      const resValue = newValue !== '4' ? Number(newValue) : undefined;

      setValue(newValue);
      setStatus && setStatus(resValue);

      await fetch({ status: resValue });
    };

    return (
      <Box
        sx={{
          px: 2,
        }}
      >
        <Tabs value={value} onChange={handleChange}>
          <Tab
            label={`待审批${
              statusInfo?.enterpriseAuditingAmount !== undefined
                ? '（' + statusInfo?.enterpriseAuditingAmount + '）'
                : ''
            }`}
            value="1"
          />
          <Tab
            label={`审批通过${
              statusInfo?.enterpriseAuditingPassAmount !== undefined
                ? '（' + statusInfo?.enterpriseAuditingPassAmount + '）'
                : ''
            }`}
            value="2"
          />
          <Tab
            label={`审批拒绝${
              statusInfo?.capitalApproveAmount !== undefined
                ? '（' + statusInfo?.capitalApproveAmount + '）'
                : ''
            }`}
            value="3"
          />
          <Tab
            label={`全部${
              statusInfo?.enterpriseAllAmount !== undefined
                ? '（' + statusInfo?.enterpriseAllAmount + '）'
                : ''
            }`}
            value="4"
          />
        </Tabs>
      </Box>
    );
  },
  (prevProps, nextProps) => {
    return (
      prevProps?.statusInfo?.totalApproveAmount ===
      nextProps?.statusInfo?.totalApproveAmount
    );
  },
);
